{% extends 'base.html' %}
{% block title %}首页{% endblock %}
{% block content %}
    <div class="page-header">
        <h1>不良品输入
            <small>Input Not Good</small>
        </h1>
    </div>
    <div class="row">
        <div class="col-lg-3"><span class="label label-info"> {{ day_or_night }}</span></div>
        <div class="col-lg-3">{{ time }}</div>
    </div>
    <div class="row">
        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">输入</h3>
            </div>
            <div class="panel-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="ng_1" class="col-sm-2 control-label">铸造不良</label>
                        <div class="col-lg-3">
                            <input type="text" class="form-control" id="ng_1" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="ng_2" class="col-sm-2 control-label">加工不良</label>
                        <div class="col-lg-3">
                            <input type="text" class="form-control" id="ng_2" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="ng_3" class="col-sm-2 control-label">涂装不良</label>
                        <div class="col-lg-3">
                            <input type="text" class="form-control" id="ng_3" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button id="btn_new" type="button" class="btn btn-default">保存</button>
                        </div>
                    </div>
                    {% csrf_token %}
                </form>
            </div>
        </div>
    </div>
    <div class="row">
        <div id="notify"></div>
    </div>
{% endblock %}
{% block script %}
    <script>
        $(document).ready(function () {
            let notify = $("#notify");
            notify.iziModal({
                padding: 20,
                headerColor: '#4eb98c',
                timeout: 3000,
                title: 'Info'
            });
            // csrf
            let csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
            console.log('csrf:' + csrftoken);

            function csrfSafeMethod(method) {
                return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
            }

            $.ajaxSetup({
                beforeSend: function (xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });

            $("#btn_new").click(function (evt) {
                evt.preventDefault();
                // 检查输入
                $.post('/add/',
                    {
                        "ng_1": $("#ng_1").val(),
                        "ng_2": $("#ng_2").val(),
                        "ng_3": $("#ng_3").val(),
                    },
                    function (data) {
                        console.log(data);
                        if (data.success === true) {
                            $("#notify .iziModal-content").html("成功保存数据");
                            // 清除表单
                            $("#ng_1").val("");
                            $("#ng_2").val("");
                            $("#ng_3").val("");
                        }
                        else {
                            $("#notify .iziModal-content").html("保存数据失败，错误：" + data.e);
                        }
                        notify.iziModal('open');

                    });
            });


            // end
        });
    </script>
{% endblock %}